<template>
  <ContentWrap v-loading="formLoading">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="tenant">
        <TenantForm ref="tenantRef" v-model:activeName="activeName" :propFormData="formData" />
      </el-tab-pane>
      <!-- <el-tab-pane label="扩展信息" name="store">
        <StoreForm ref="storeRef" v-model:activeName="activeName" :propFormData="formData" />
      </el-tab-pane>
      <el-tab-pane label="运营设置" name="operation" v-if="formData.tenantType == 4">
        <OperationForm ref="storeRef" v-model:activeName="activeName" :propFormData="formData" />
      </el-tab-pane> -->
    </el-tabs>
    <el-form>
      <el-form-item style="float: right">
        <el-button :loading="formLoading" type="primary" @click="submitForm"> 保存 </el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import * as TenantApi from '@/api/system/tenant'
import TenantForm from './TenantForm.vue' //租户信息
// import StoreForm from './StoreForm.vue' // 公司门店信息
// import OperationForm from './OperationForm.vue' //运营设置
import { useTagsViewStore } from '@/store/modules/tagsView'
import { CommonStatusEnum } from '@/utils/constants'

defineOptions({ name: 'TenantAdd' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const activeName = ref('tenant') // Tag 激活的窗口
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const tenantRef = ref() // 商品信息 Ref
// const storeRef = ref() //扩展信息 Ref
const { push, currentRoute } = useRouter() // 路由
const { params } = useRoute() // 查询参数
const { delView } = useTagsViewStore() // 视图操作
const formData = ref({
  id: undefined,
  name: undefined,
  packageId: undefined,
  contactName: undefined,
  contactMobile: undefined,
  accountCount: undefined,
  expireTime: undefined,
  website: undefined,
  status: CommonStatusEnum.ENABLE,
  username: undefined,
  password: undefined,
  tenantType: undefined,
  tenantCount: undefined,
  adminName: undefined,
  adminMobile: undefined,
  validityTime: undefined,
  validityUnit: 0,
  logo: '',
  businessLicense: '',
  shortName: '',
  acreage: '',
  detailAddress: '',
  introduction: '',
  areaId: 0,
  openingTime: undefined,
  closingTime: undefined,
  latitude: undefined,
  longitude: undefined,
  tenantTypeName: '商户',
  enableAcceptUser: false,
  enableShareUser: false,
  shareTenants: []
})

/** 获得详情 */
const getDetail = async () => {
  const id = params.id as unknown as number
  if (id) {
    formLoading.value = true
    try {
      formData.value = await TenantApi.getTenant(id)
    } finally {
      formLoading.value = false
    }
  }
}
/** 提交按钮 */
const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
    // 校验各表单
    await unref(tenantRef)?.validate()
    console.log(formData.value)

    // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
    const deepCopyFormData = cloneDeep(unref(formData.value))
    console.log(deepCopyFormData)

    // 校验都通过后提交表单
    const data = deepCopyFormData as unknown as TenantApi.TenantVO
    const id = params.id as unknown as number
    if (!id) {
      await TenantApi.createTenant(data)

      message.success(t('common.createSuccess'))
    } else {
      await TenantApi.updateTenant(data)

      message.success(t('common.updateSuccess'))
    }
    close()
  } finally {
    formLoading.value = false
  }
}

/** 关闭按钮 */
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'SystemTenant' })
}
/** 初始化 */
onMounted(async () => {
  await getDetail()
})
</script>
